<template>
	<view class="">
		<view class="vdio">

			<video :src="infoData.cameraUrl"></video>
		</view>
		<view class="yaokong">
			<view class="yaokong-btn">
				<yaokong @btn_click="btn_click" />
			</view>
		</view>
		<view class="wrap">
			<view class="index-realTime">
				<view class="realTime-msg dis" v-for="(item,index) in infoData.agriculturalData">
					<view class="realTime-msg-left">
						<view class="realTime-msg-left-bom">{{item.label}}</view>
						<view class="realTime-msg-left-bom">{{item.value}}</view>
					</view>
					<view class="realTime-msg-right">
						<image :src="item.pic" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<home></home>
	</view>
</template>
<script>
	import home from '@/components/home/index.vue'
	import {
		getOptCamera,
		getCameraInfo
	} from '@/api/togeterRich/index.js'
	import yaokong from "@/pagesA/fromClouds/com/yaokong.vue"
	import {
		getIndexData
	} from '@/api/api.js';
	export default {
		components: {
			yaokong,
			home,

		},
		data() {
			return {
				devCode: '',
				direction: 'UP',
				nowTimeList: [],
				infoData: {},
				url: 'https://vd2.bdstatic.com/mda-pkm0acama0hrd94b/cae_h264/1700612110023183301/mda-pkm0acama0hrd94b.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1700909206-0-0-ab1d01f5ba226b4235edf627cbcd35ce&bcevod_channel=searchbox_feed&pd=1&cr=0&cd=0&pt=3&logid=2806138603&vid=9814342141553576019&klogid=2806138603&abtest=114032_1-114240_2-114675_1'
			}
		},
		onLoad(e) {
			console.log(e, '接收到的')
			if (e) {
				this.devCode = e.devCode
				this.id = e.id
				uni.setNavigationBarTitle({
					title: e.tit
				});
			} else {
				uni.setNavigationBarTitle({
					title: "云端溯源详情"
				});
			}
			this.init()
			this.getIndexConfig()

		},
		onShow(e) {

		},
		methods: {
			init() {
				let data = {
					id: this.id
				}
				getCameraInfo(data).then(res => {
					this.infoData = res.data
					console.log(res, '摄像头详情')
				})
			},
			setGetOptCamera() {
				let data = {
					devCode: this.devCode,
					direction: this.direction
				}
				getOptCamera(data).then(res => {
					console.log(res, 'sddsd')
				})

			},
			btn_click(type) {
				this.direction = type
				this.setGetOptCamera()

			},
			getIndexConfig: function() {
				let that = this;
				getIndexData().then(res => {
					that.$set(that, "nowTimeList", res.data.agriculturalData);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yaokong {
		background: #fff;
		height: 600rpx;
		padding: 30rpx 0;

		.yaokong-btn {
			width: 100%;
			height: 100%;
			margin: 20rpx auto;
			width: 65%;
		}

	}

	.wrap {
		padding: 30rpx;
		background: #fff;
	}

	.vdio {
		width: 100%;
		height: 430rpx;

		video {
			width: 100%;
			height: 100%;
		}
	}

	.index-realTime {
		width: 100%;

		display: flex;
		flex-wrap: wrap;

		justify-content: space-between;

		.realTime-msg {
			width: 45%;
			margin: 12rpx;

			height: 124rpx;
			background:  $secondary-colour;
			border-radius: 10rpx;
			opacity: 1;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;

			.realTime-msg-left {
				font-size: 28rpx;

				.realTime-msg-left-bom {
					color: $maincolor;
				}
			}

			.realTime-msg-right {
				image {
					width: 70rpx;
					height: 70rpx;
				}
			}

		}
	}
</style>